<template>
	<div class="page pageFixed">
		<custom-box customback title="签到有奖" @back="back">
			<div class="treasurechest flex jlr" style="position: relative;">
				<div class="award_left">
					<div class="award_left_title flex a-center">
						<div class="icon"></div>
						<div class="info">
							<h4>每日签到</h4>
							<p>已累计签到<span>22</span>天</p>
						</div>
					</div>
					
					<div class="award_left_list">
						<div class="item flex a-center jlr" v-for="i in 5">
							<div class="flex a-center">
								<div class="icon"></div>
								<div class="date">12/12 </div>
							</div>
							<div class="value"><span>+10</span>/积分</div>
						</div>
					</div>
					
				</div>
				<div class="award_right">
					<div class="flex j-center">
						<div class="fen_item flex a-center jlr">
							<div class="diamond"></div>
							<span>总积分</span>
							<h4>20000</h4>
						</div>
					</div>
					<div class="plan">
						<div class="plan_box" @click="start(5)">
							<div class="item flex a-center j-center" :class="{'on':index==0}"><img src="../../assets/img/award/award01.png"></div>
							<div class="item flex a-center j-center" :class="{'on':index==1}"><img src="../../assets/img/award/award02.png"></div>
							<div class="item flex a-center j-center" :class="{'on':index==2}"><img src="../../assets/img/award/award03.png"></div>
							<div class="item flex a-center j-center" :class="{'on':index==3}"><img src="../../assets/img/award/award04.png"></div>
							<div class="item flex a-center j-center" :class="{'on':index==4}"><img src="../../assets/img/award/award05.png"></div>
							<div class="item flex a-center j-center" :class="{'on':index==5}"><img src="../../assets/img/award/award06.png"></div>
							<div class="item flex a-center j-center" :class="{'on':index==6}"><img src="../../assets/img/award/award07.png"></div>
							<div class="item flex a-center j-center" :class="{'on':index==7}"><img src="../../assets/img/award/award08.png"></div>
						</div>
					</div>
				</div>
				
				<div class="button award_submit" @click="next">更多记录</div>
				
			</div>			
		</custom-box>
	</div>
</template>
<script>
	/*
	@backAward 返回上一页
	@nextAward 返更多记录
	*/
export default {
	data(){
		return {
			time:null,
			index:-1
		}
	},
	methods:{
		back(){
			this.$emit('back')
		},
		next(){
			this.$emit('next')
		},
		start(val){
			if(!this.time){
				let startTime = 100
				this.index = 0
				this.time = setInterval(()=>{
					startTime += 10
					if(this.index>7){
						this.index = 0
					}else{
						this.index+=1
					}
					 if(startTime>1000){
						 if(this.index==val){
							 clearInterval(this.time)
						 }
					 }
				},startTime)
			}
		}
	},
	mounted() {
		
	}
}
</script>
<style scoped lang="scss">
	.award_left{width: 3.86rem; padding-right: .2rem;}
	.award_left_title{
		.icon{width: 1.38rem; height: 1.06rem; background: url('../../assets/img/boxsim.png') no-repeat; background-size: 100% 100%;}
		.info{flex:1; color:#999; font-size: .24rem; padding-left: .3rem;}
		h4{font-size: .3rem; color:#353535; margin-bottom: .1rem;}
		.info span{color: #F84638;}
	}
	.award_right{width: 3.78rem; height: 3.98rem;}
	.award_left_list{
		padding-top: .3rem;
		.item{padding: .17rem 0;}
		.item .icon{width: .4rem; margin-right: .15rem; height: .33rem; background:url('../../assets/img/diamond.png') no-repeat; background-size: contain;}
		.item .date{font-size: .24rem; color: #999;}
		.item .value{font-size: .2rem; color: #F84638;}
		.item .value span{font-size: .24rem;}
	}
	.fen_item{width: 3.24rem; height: .68rem; border-radius: .34rem; background-color: #fff; border: 1px solid #4BC5FF; position: relative; padding-right: .2rem; padding-left: .6rem; font-size: .24rem; color: #353535; margin: .2rem 0;}
	.fen_item.on{background-color: #FFF6DA; border: 1px solid #F6B560; margin-top: .14rem; color: #B14D07;}
	.fen_item .diamond{width: .72rem; height: .61rem; background: url('../../assets/img/diamond.png'); background-size: 100% 100%; position: absolute; left: -.2rem; top: 50%; transform: translateY(-50%);}
	.fen_item.on .diamond{background: url('../../assets/img/diamond1.png'); background-size: 100% 100%;}
	.fen_item h4{font-size: .28rem;}
	.plan{width: 3.78rem; height: 3.98rem; background: url('../../assets/img/plan.png') no-repeat; background-size: 100% 100%; padding: .22rem;}
	.plan_box{position: relative; width: 100%; height: 100%;}
	.plan .item{
		 width: 1.08rem; height: 1.15rem; border-radius: 0.08rem;
		 &:nth-child(1){position: absolute; left: 0; top: 0;}
		 &:nth-child(2){position: absolute; left: 1.13rem; top: 0;}
		 &:nth-child(3){position: absolute; left: 2.26rem; top: 0;}
		 &:nth-child(4){position: absolute; left: 2.26rem; top: 1.2rem;}
		 &:nth-child(5){position: absolute; left: 2.26rem; top: 2.4rem;}
		 &:nth-child(6){position: absolute; left: 1.13rem; top: 2.4rem;}
		 &:nth-child(7){position: absolute; left: 0rem; top: 2.4rem;}
		 &:nth-child(8){position: absolute; left: 0rem; top: 1.2rem;}
		 img{width: .74rem; height: .64rem; display: block; margin: auto;}
		 &.on{background-color: #f00;}
	}
	.award_submit{position: absolute; left: 50%; bottom: -0.8rem; transform: translateX(-50%);}
</style>